<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="{% static 'js/plugins/layer/layer.js' %}"></script>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="https://www.douban.com/" style="font-size: 30px;color: deeppink">豆瓣</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="float: left">
      <form class="navbar-form navbar-left" id="addForm" method="post">
          {% csrf_token %}
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" value="{% if search_text %}{{ search_text }}{% endif %}" name="search1" id="search1" style="width: 300px" spellcheck ="false">
        </div>
        <button type="button" class="btn btn-info" id="Go" value="Go">搜索</button>
      </form>

    </div>
    <div style="font-size: 20px; padding-top: 10px; padding-left: 10px; color: #FF3030;float: left;">
        <a href="https://movie.douban.com/cinema/nowplaying/" style="text-decoration:none; margin-left: 10px;">影讯&购票</a>
        <a href="https://movie.douban.com/explore" style="text-decoration:none; margin-left: 15px;">选电影</a>
        <a href="https://movie.douban.com/tv/" style="text-decoration:none; margin-left: 15px;">电视剧</a>
        <a href="https://movie.douban.com/chart" style="text-decoration:none; margin-left: 15px;">排行榜</a>
        <a href="https://movie.douban.com/tag/" style="text-decoration:none; margin-left: 15px;">分类</a>
        <a href="https://movie.douban.com/review/best/" style="text-decoration:none; margin-left: 15px;">影评</a>
        <a href="https://movie.douban.com/annual/2019?source=navigation" style="text-decoration:none; margin-left: 15px;">2019年度榜单</a>
        <a href="https://m.douban.com/standbyme/annual2019?source=navigation" style="text-decoration:none; margin-left: 15px;">2019书影音报告</a>
    </div>

  </div>
</nav>
{% block mainbody %}

{% endblock %}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
  $( function() {
    var availableTags = {{ name_list|safe }};
    $( "#search1" ).autocomplete({
      source: function(request, response) {
        var results = $.ui.autocomplete.filter(availableTags, request.term);
        response(results.slice(0, 6));
        }
    });
  });

  $("#Go").click(function () {
    var data = $("#addForm").serialize();
    $.ajax({
        type: $("#addForm").attr('method'),
        url : "{% url 'searchInfo' %}",
        data : data,
        cache: false,
        success : function(msg) {
            if (msg.result){
                window.location.href = "{% url 'search_result' %}"+'?search_text='+msg.search_text;
            }else{
                layer.alert('不存在相关信息！', {icon: 5});
                //$('errorMessage').html(msg.message)
            }
            return ;
        }
    });

  });

</script>

</body>
</html>